<template>
  <el-card class="box-card">
    <el-button type="primary" style="small" @click="dialogFormVisible = true"
      >添加分类</el-button
    >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="300" type="index"> </el-table-column>

      <el-table-column label="分类名称" width="300">
        <template v-slot="{ row }">
          <span v-show="!row.changeTable">{{ row.cateName }}</span>
          <el-input
            v-model="row.cateName"
            placeholder="请输入内容"
            v-show="row.changeTable"
            size="small"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="是否启用" width="300">
        <template v-slot="{ row }">
          <el-switch
            style="margin-left: 10px"
            v-model="row.state"
            active-color="#13ce66"
            inactive-color="#ccc"
            :disabled="!row.changeTable"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-button
            size="mini"
            @click="handleEdit($index, row)"
            :type="row.changeTable ? 'success' : 'primary'"
            >{{ row.changeTable ? '完成' : '编辑' }}</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete($index, row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageInfo.currentPage"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20]"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- 弹框 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form
        :model="addCate"
        class="demo-ruleForm"
        ref="ruleForm"
        :rules="rules"
      >
        <el-form-item label="分类名称" prop="cateName">
          <el-input v-model="addCate.cateName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="addCate.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="enterAdd('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { validateAccount } from '@/util/rule/fromRule'
import {
  addGoodsCategory,
  getGoodsCategoryList,
  delGoodsInfo,
  updateGoodsInfo
} from '@/req/GoodsAjax'
import { alterSuccess, alterError, confirmMsg } from '@/util/msgTips'
export default {
  data () {
    return {
      // 列表信息
      tableData: [
        {
          id: '',
          cateName: '超级霸王无敌单人套餐',
          state: true,
          changeTable: false // 控制开关
        }
      ],
      // 页面信息
      pageInfo: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      dialogFormVisible: false,
      // 添加分类信息
      addCate: {
        cateName: '',
        state: 'false'
      },
      rules: {
        cateName: [{ validator: validateAccount, trigger: 'blur' }]
      }
    }
  },

  async created () {
    // 获取列表请求
    this.getGoodsListInfo()
  },
  methods: {
    // 获取页面列表数据
    async getGoodsListInfo () {
      const { data, total } = await getGoodsCategoryList({
        currentPage: this.pageInfo.currentPage,
        pageSize: this.pageInfo.pageSize
      })
      data.map(el => {
        if (el.state === 0) {
          el.state = false
        } else {
          el.state = true
        }
        return el
      })
      // 如果直接赋值的话,里面还有一个flag属性,但是data中没有,
      // 如果直接复制的话,那么那个属性就没有响应式
      this.pageInfo.total = total
      if (data) {
        this.tableData = data
        this.tableData.forEach(el => {
          this.$set(el, 'changeTable', false)
        })
      }
    },

    // 编辑
    handleEdit (index, row) {
      // 让当前行变成输入框,可以修改

      // 修改完成点击确认,完成修改
      if (row.changeTable) {
        // 发送请求
        confirmMsg(
          async () => {
            const { code, msg } = await updateGoodsInfo(row)
            if (code === 0) {
              alterSuccess(msg)
            } else {
              alterError(msg)
            }
            row.changeTable = false
          },
          '是否确认修改',
          () => {
            row.changeTable = false
          }
        )
      } else {
        row.changeTable = true
      }
    },

    // 删除
    handleDelete (index, row) {
      confirmMsg(async () => {
        const { code, msg } = await delGoodsInfo(row.id)
        if (code === 0) {
          alterSuccess(msg)
          this.tableData.splice(index, 1)
        } else {
          alterError(msg)
        }
      })
    },
    // 页面大小发生变化时
    handleSizeChange (val) {
      this.pageInfo.pageSize = val
      this.getGoodsListInfo()
    },
    // 获取当前页面
    handleCurrentChange () {
      this.getGoodsListInfo()
    },

    // 确认 添加
    enterAdd (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { code, msg } = await addGoodsCategory(this.addCate)
          if (code === 0) {
            alterSuccess(msg)
            this.$refs[formName].resetFields() // resetFileds
            this.dialogFormVisible = false
            this.getGoodsListInfo()
          } else {
            alterError(msg)
          }
        } else {
          alterError('输入框不能为空!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 30px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
